<template>
  <div id="root">
    <ul>
        <li v-for="(v,index) in list" :key="index">
            <div>
                <div class="time">{{v.time}}</div>
                <div class="cont">
                    <img :src="v.src" alt="">
                    <p class="title">{{v.title}}</p>
                    <p class="wen">{{v.content}}</p>
                </div>
            </div>
        </li>
    </ul>
    <p class="foot">已加载全部</p>
  </div>
</template>

<script>
export default {
    data(){
        return{
            list:[]
        }
    },
    mounted(){
        this.$http({
            url:"http://localhost:3000/ActionContent",
            method:"GET"
        }).then(res=>{
            this.list=res.data;
        })
    }
}
</script>

<style lang="scss" scoped>
    #root{
        background-color: #f2f2f2;
        overflow: hidden;
    }
    li{
        list-style: none;
        width: 21.25rem;
        margin: 0 auto;
    }
    .time{
        margin-left: 8.75rem;
        margin-top:.9375rem;
        margin-bottom: .625rem;
        font-size: .125rem;
        color: gray;
    }
    .cont{
        background-color: white;
        border-radius: 10px;
        height: 11.875rem;
    }
    img{
        width: 100%;
    }
    .title{
        margin-left: .625rem;
    }
    .wen{
        width: 20rem;
        font-size: .75rem;
        color: gray;
        margin-left: .625rem;
    }
    .foot{
        margin-left: 9.375rem;
        margin-top: .625rem;
    }
</style>